<template>
  <div :id="echarts" ref="echarts" class="echarts" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: ['data'],
  computed: {
    echarts() {
      return 'echarts' + (Math.random() * 100000).toFixed(0)
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (JSON.stringify(this.data) !== '{}') {
        this.drawEcharts(this.data)
      }
    })
  },
  watch: {
    data(newValue, oldval) {
      this.drawEcharts(newValue)
    },
  },

  methods: {
    // 基于准备好的dom，初始化echarts实例
    drawEcharts(val) {
      const myChart = echarts.init(document.getElementById(this.echarts))
      myChart.clear()
      let XData = [
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
      ]

      let colorList = ['#5084E2', '#F47C59', '#48D4C4']

      myChart.setOption({
        color: colorList,
        // tooltip: {
        //   trigger: 'item',
        //   confine: true,
        // },
        radar: {
          center: ['50%', '50%'], // 外圆的位置
          radius: '80%',
          name: {
            textStyle: {
              color: 'rgba(255, 255, 255, 0.5)',
              fontSize: 14,
              fontWeight: 400,
              fontFamily: 'PingFangSC-Regular,PingFang SC',
              fontStyle: 'normal',
            },
          },
          // TODO:
          indicator: [
            {
              name: '通话饱和度',
              max: 100,
            },
            {
              name: '周通话时长',
              max: 100,
            },
            {
              name: '指令密度',
              max: 100,
            },
            {
              name: '指挥架次',
              max: 100,
            },
            {
              name: '指令有效率',
              max: 100,
            },
            {
              name: '波占比',
              max: 100,
            },
            {
              name: '非冲突指挥率',
              max: 100,
            },
            {
              name: '意图识别率',
              max: 100,
            },
            {
              name: '指令饱和度',
              max: 100,
            },
            {
              name: '语速饱和度',
              max: 100,
            },
          ],
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['#1c2330'],
              // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            // 指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#1781BA', // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            type: 'radar',
            symbolSize: 5,
            data: [
              {
                // TODO:
                value: [80, 80, 80, 70, 60, 50, 90, 80, 70, 95],
                name: '席位1',
                areaStyle: {
                  normal: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(46,203,255, 0.14)', // 0% 处的颜色
                        },
                        {
                          offset: 0.15,
                          color: 'rgba(46,203,255, 0.14)', // 100% 处的颜色
                        },
                        {
                          offset: 0.75,
                          color: 'rgba(46,203,255, 0.4)', // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(46,203,255, 0.5)', // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
                itemStyle: {
                  // 折线拐点标志的样式。
                  normal: {
                    // 普通状态时的样式
                    lineStyle: {
                      width: 1,
                    },
                    opacity: 0.3,
                  },
                  emphasis: {
                    // 高亮时的样式
                    lineStyle: {
                      width: 5,
                    },
                    opacity: 0,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    color: 'white',
                    position: 'top',
                  },
                },
              },
              {
                // TODO:
                value: [40, 70, 50, 60, 30, 80],
                name: '席位2',
                areaStyle: {
                  normal: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(255, 127,0, 0.14)', // 0% 处的颜色
                        },
                        {
                          offset: 0.15,
                          color: 'rgba(255, 127,0, 0.14)', // 100% 处的颜色
                        },
                        {
                          offset: 0.75,
                          color: 'rgba(2255, 127,0, 0.4)', // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(255, 127,0, 0.5)', // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
                itemStyle: {
                  // 折线拐点标志的样式。
                  normal: {
                    // 普通状态时的样式
                    lineStyle: {
                      width: 1,
                    },
                    opacity: 0.3,
                  },
                  emphasis: {
                    // 高亮时的样式
                    lineStyle: {
                      width: 5,
                    },
                    opacity: 0,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    color: '#fff',
                    position: 'top',
                  },
                },
              },
            ],
          },
        ],
      })
      window.addEventListener('resize', () => myChart.resize(), false)
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  justify-content: center;
}
</style>
